<template>
  <div class="accessCar">
    <div class="boxtop">
      <van-nav-bar title="车辆评估">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="clickLeft"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <div class="fontbox">
      <div class="middleBox">
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="(item, index) in ArrayImg" :key="index">
            <div class="cardu">{{ item }}</div>
            <div class="pictureaa">
              <div class="uploadImg">
                <van-uploader :after-read="afterRead" />
              </div>
              <!-- <div class="uploadPhone">
                <div
                  class="phone"
                  @click="$refs.file.click()"
                  :style="backgroundImg"
                >
                  <input type="file" hidden ref="file" @change="onFileChange" />
                  <img :src="vhclPic.imgUrl" />
                </div>
              </div> -->
            </div>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="bottom">
        <div class="buttonLeft" @click="backForward">上一步</div>
        <div class="buttonRight" @click="saveReport">生成评估报告</div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetAccessImage } from '@/api/user'
export default {
  data() {
    return {
      type: '2201',
      // 获取图片数组
      ArrayImg: [],
      // 上传图片
      vhclPic: {
        imgUrl: '',
        picType: 'image / jpeg'
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    clickLeft() {
      this.$router.back()
    },
    async getInfo() {
      try {
        const { data } = await GetAccessImage(this.type)
        console.log(data)
        data.forEach((item, index) => {
          this.ArrayImg.push(item.codeDesc)
        })
      } catch (err) {
        this.$toast('获取失败,请稍后再试')
      }

      // try {
      //   const { data1 } = await GetPicture(this.$route.query.custIntentId)
      //   console.log(data1.data)
      // } catch (err) {
      //   console.log(this.err)
      // }
    },
    // 文件上传至服务器
    afterRead(file) {
      console.log(file)
    },
    backForward() {
      this.$router.back()
    },
    saveReport() {
      this.$router.push({ path: '/result', query: { vhclEvaId: '100' } })
    }
  }
}
</script>
<style lang='less' scoped>
.accessCar {
  background-color: #f6f6f9;
  .fontbox {
    background-color: #fff;
    .middleBox {
      margin-top: 15px;
      height: 100%;
      .pictureaa {
        width: 90px;
        height: 90px;
        border: 1px solid #dddddd;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        .uploadImg {
          width: 90%;
          height: 90%;
        }
      }
    }
    .cardu {
      font-size: 0.373333rem;
      margin-bottom: 10px;
      color: #a4a4a4;
    }
    .bottom {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      margin-bottom: 30px;
      width: 100%;
      height: 38px;
      .buttonLeft {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 38px;
        border-radius: 19px;
        border: 1px solid #4397d4;
        background-color: #fff;
        color: #4397d4;
        font-size: 14px;
      }
      .buttonRight {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 38px;
        border-radius: 19px;
        background-color: #4397d4;
        color: #ffff;
        font-size: 14px;
      }
    }
  }
}
</style>
